<template>
  <header>
      <div class="header-container">
        <div class="main">
          <div class="zhedie">
            <div class="item" @click="sidebarFold = !sidebarFold">
              <i :class="sidebarFold?'el-icon-s-unfold icon-svg':'el-icon-s-fold icon-svg'"></i>
            </div>
          </div>
          <router-link to="to" title="" tag="div" class="router-link-exact-active router-link-active title is-link">
              <el-avatar size="medium">
                  <img src="~@/assets/img/3080383.jpg">
              </el-avatar>
              <span>儿童青少年运动健康智能管理平台</span>
          </router-link>
          <!-- <div class="nav">
            <div :class="headerActived == '85'?'item active':'item'" @click="changeHeaderActived('85')">
              <icon-svg name="sidebar-videos"></icon-svg>
              <span>项目管理</span>
            </div>
            <div :class="headerActived == '83'?'item active':'item'" @click="changeHeaderActived('83')">
              <icon-svg name="sidebar-default"></icon-svg>
              <span>系统管理</span>
            </div>
            <div :class="headerActived == '84'?'item active':'item'" @click="changeHeaderActived('84')">
              <icon-svg name="sidebar-other"></icon-svg>
              <span>基础支撑</span>
            </div>
          </div> -->
        </div>
        <div class="user">
          <div class="tools">
              <el-tooltip effect="dark" content="全屏" placement="bottom">
                  <span class="item" @click="fullscreen">
                      <icon-svg :name="isFullscreen ? 'exit_fullscreen' : 'fullscreen'" />
                  </span>
              </el-tooltip>
              <el-tooltip effect="dark" content="刷新页面" placement="bottom">
                  <span class="item" @click="refresh()">
                      <icon-svg name="reload" />
                  </span>
              </el-tooltip>
          </div>
          <el-dropdown class="user-container">
              <div class="user-wrapper">
                  <el-avatar size="medium">
                      <img src="~@/assets/img/avatar.png" :alt="userName">
                  </el-avatar>
                  {{ userName }}
                  <i class="el-icon-caret-bottom" />
              </div>
              <el-dropdown-menu slot="dropdown" class="user-dropdown">
                  <el-dropdown-item @click.native="updatePasswordHandle()">修改密码</el-dropdown-item>
                  <el-dropdown-item @click.native="logoutHandle()">退出登录</el-dropdown-item>
              </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
      <!-- 弹窗, 修改密码 -->
    <update-password v-if="updatePassowrdVisible" ref="updatePassowrd"></update-password>
  </header>
</template>

<script>
  import UpdatePassword from './main-navbar-update-password'
  import { clearLoginInfo } from '@/utils'
  import screenfull from 'screenfull'
  export default {
    data () {
      return {
        isFullscreen: false,
        updatePassowrdVisible: false
      }
    },
    inject: ['refresh'],
    components: {
      UpdatePassword
    },
    mounted() {
      screenfull.on('change', this.fullscreenChange)
    },
    beforeDestroy() {
      screenfull.off('change', this.fullscreenChange)
    },
    computed: {
      navbarLayoutType: {
        get () { return this.$store.state.common.navbarLayoutType }
      },
      sidebarFold: {
        get () { return this.$store.state.common.sidebarFold },
        set (val) { this.$store.commit('common/updateSidebarFold', val) }
      },
      // headerActived: {
      //   get () { return this.$store.state.common.headerActived },
      //   set (val) { this.$store.commit('common/updateHeaderActived', val) }
      // },
      mainTabs: {
        get () { return this.$store.state.common.mainTabs },
        set (val) { this.$store.commit('common/updateMainTabs', val) }
      },
      userName: {
        get () { return this.$store.state.user.name }
      }
    },
    methods: {
      fullscreen() {
        screenfull.toggle()
      },
      fullscreenChange() {
        this.isFullscreen = screenfull.isFullscreen
      },
      // 修改密码
      updatePasswordHandle () {
        this.updatePassowrdVisible = true
        this.$nextTick(() => {
          this.$refs.updatePassowrd.init()
        })
      },
      // 退出
      logoutHandle () {
        this.$confirm(`确定进行[退出]操作?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http({
            url: this.$http.requestUrl('/sys/logout'),
            method: 'post',
            data: this.$http.requestData()
          }).then(({data}) => {
            if (data && data.code === 0) {
              clearLoginInfo()
              this.$router.push({ name: 'login' })
            }
          })
        }).catch(() => {})
      }
    }
  }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
header {
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    padding: 0 10px;
    height: 70px;
    background-color: #409eff;
    color: #fff;
    .header-container {
        width: 100%;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .main {
            display: flex;
            align-items: center;
        }
    }
    @media screen and (max-width: 100%) {
        .header-container {
            width: 100%;
        }
    }
    ::v-deep .title {
        position: relative;
        width: inherit;
        height: inherit;
        padding: inherit;
        background-color: inherit;
        .logo {
            width: 199px;
            height: 66px;
        }
        span {
            font-size: 24px;
            margin-left: 10px;
            letter-spacing: 1px;
        }
    }
    .nav {
        display: flex;
        margin-left: 50px;
        .item {
            margin: 0 10px;
            padding: 10px;
            border-radius: 10px;
            cursor: pointer;
            transition: all 0.3s;
            &.active,
            &:hover {
                background-color: #8CC5FF;
            }
            .icon-svg {
                font-size: 20px;
                & + span {
                    margin-left: 5px;
                    font-size: 16px;
                }
            }
        }
    }
    ::v-deep .user {
        padding: 0;
        .user-container {
            color: #fff;
            font-size: 16px;
        }
    }
    .zhedie {
        display: flex;
        margin-left: 0px;
        .item {
            margin: 0px;
            padding: 5px;
            border-radius: 10px;
            cursor: pointer;
            transition: all 0.3s;
            &.active,
            &:hover {
                background-color: #8CC5FF;
            }
            .icon-svg {
                font-size: 20px;
                & + span {
                    margin-left: 5px;
                    font-size: 16px;
                }
            }
        }
    }
}

// 侧边栏动画
.sidebar-enter-active {
    transition: all 0.2s;
}
.sidebar-enter,
.sidebar-leave-active {
    opacity: 0;
    transform: translateY(20px);
}
.sidebar-leave-active {
    position: absolute;
}

// 主内容区动画
.main-enter-active {
    transition: all 0.2s;
}
.main-leave-active {
    transition: all 0.15s;
}
.main-enter {
    opacity: 0;
    margin-left: -20px;
}
.main-leave-to {
    opacity: 0;
    margin-left: 20px;
}

.title {
    position: fixed;
    z-index: 1000;
    top: 0;
    width: inherit;
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    text-align: center;
    overflow: hidden;
    text-decoration: none;
    &.is-link {
        cursor: pointer;
    }
    .logo {
        span {
            margin-left: 10px;
        }
    }
    span {
        display: block;
        font-weight: bold;
        color: #fff;
    }
}

.user {
    display: flex;
    align-items: center;
    padding: 0 20px;
    white-space: nowrap;
}
.tools {
    margin-right: 20px;
    .item {
        margin-left: 5px;
        padding: 6px 8px;
        border-radius: 5px;
        outline: none;
        cursor: pointer;
        transition: all 0.3s;
        .icon-svg {
            font-size: 18px;
        }
    }
    .item-pro {
        display: inline-block;
        animation: pro-text 3s ease-out infinite;
        @keyframes pro-text {
            0%,
            20% {
                transform: scale(1);
            }
            50%,
            70% {
                transform: scale(1.2) translateX(-5px) translateY(-2px);
            }
            100% {
                transform: scale(1);
            }
        }
        .title {
            padding-left: 5px;
            font-weight: bold;
            font-size: 14px;
            background-image: linear-gradient(to right, #ffa237, #fc455d);
            background-clip: text;
            -webkit-text-fill-color: transparent;
        }
    }
}
.user-container {
    display: inline-block;
    height: 50px;
    line-height: 50px;
    cursor: pointer;
    .user-wrapper {
        .el-avatar {
            vertical-align: middle;
            margin-top: -2px;
            margin-right: 4px;
        }
    }
}

</style>
